<template>
  <div class="tree-menu">
    <ul v-if="nodes&&nodes.length>0"
        :style="indent">
      <li class="rating-item"
          v-for="(item,index) in nodes"
          :key="index">
        <div>
          <div class="avatar"
               style="display:flex">
            <div class="name"
                 style="color:#aaa;">{{item.replyPeople}}&nbsp;&nbsp;:&nbsp;&nbsp;</div>
          </div>
          <div class="rating-content"
               v-html="item.content"></div>
          <div class="rating-area">
            <div class="rating-option">

              <div class="replay"
                   v-if="(name=='name5'&&(roleId==3||roleId==4||roleId==2)&&item.userId!=userId)||(name=='name4'&&(roleId==2||roleId==4)&&item.userId!=userId)">
                <Icon type="md-text" />
                <span style="cursor:pointer;"
                      @click="replay(item)">回复</span>
              </div>
              <div class="rating-time">
                <img src="@/assets/img/time.png">
                <span style="color: #aaa;">{{item.discussTime}}&nbsp;&nbsp;&nbsp;&nbsp;</span>
                <span v-if="roleId==1">
                  <Icon type="md-arrow-round-up"
                        :style="item.placeStatus==1?'color:#f5a623':''"
                        style="cursor:pointer;" title="置顶"/>
                  <!-- <Icon type="md-create"
                        style="cursor:pointer;" /> -->
                  <Icon type="md-trash"
                        @click="deleteCommentInfo(item)"
                        style="cursor:pointer;" title="删除" />
                </span>
              </div>

            </div>
          </div>
        </div>
        <tree-menu v-if="item.commentSonNode&&item.commentSonNode.length>0"
                   :nodes="item.commentSonNode"
                   :label="item.commentSonNode"
                   :name="name"
                   :depth="depth + 1">

        </tree-menu>
      </li>
    </ul>
    <notesModal v-if="notesModalVisible"
                ref="notesModal"></notesModal>
  </div>

</template>

<script>
import notesModal from './notes-modal'
import { mapState } from 'vuex'
export default {
  props: ['label', 'nodes', 'depth', 'name'],
  name: 'tree-menu',
  data () {
    return {
      notesModalVisible: false
    }
  },
  components: {
    notesModal,
  },
  computed: {
    ...mapState({
      roleId: state => state.user.roleId,
      userId: state => state.user.userId,
    }),
    indent () {
      // return { transform: `translate(${this.depth * 10}px)` }
      return { transform: "translate(30px)" }
    },
    random () { return Math.random() * new Date().getTime() }
  },
  mounted () {

  },
  methods: {
    replay (item) {
      this.notesModalVisible = true
      this.$nextTick(() => {
        this.$refs.notesModal.init(item)
      })
    },
    deleteCommentInfo (item) {
      eventBus.$emit('deleteCommentInfo', item)
    }
  }

}

</script>

<style lang="scss">
.tree-menu {
  .rating-option {
    display: flex;
    justify-content: flex-end;
  }
  .rating-time {
    height: 30px;
    line-height: 30px;
    font-size: 0;
    img {
      width: 11px;
      margin-right: 5px;
    }
    & > span {
      color: #b5b9bc;
      font-size: 12px;
      line-height: 20px;
    }
    .ivu-icon{
      font-size: 16px;
      color: #2d8cf0;
      cursor: pointer;
    }
  }
  .replay {
    flex: 1;
    &:hover span,
    i {
      color: #2d8cf0;
    }
  }
  .rating-content {
    line-height: 28px;
    font-size: 14px;
    color: #14191e;
    text-align: left;
    margin: 8px auto;
    word-break: break-all;
  }
}
</style>